
<script type="text/javascript">
$(document).ready(function() {

    $(".editText").dblclick( function (){
		var name = $(this).attr('rel');
                var aux = name.split("-");
		$(".editKey").html(aux[1]);
		$(".editLang").html(aux[0]);
                var content = $(this).html();
		$("#editText").html(content);
		$("#currentKey").val(name);
		$("#dialogEdit").dialog('open');
	});	

    $("#dialogEdit").dialog({
		bgiframe: true,
		autoOpen: false,
		width: 500,
		resizable : true,
		modal: true,
		title : 'Editar traduccion',
		buttons: {
			'Aceptar': function() {
					$("#" + $("#currentKey").val()).html($("#editText").val());
					$.post("/admin/texts/savetext", { texto: $("#editText").val(), lang : $(".editLang").html(), key: $(".editKey").html()}, function ( data )
					{
						$("#fade").hide();
						$("#loading").hide();
									
					});
					$(this).dialog('close');					
				},
			'Cerrar': function() {
				$(this).dialog('close');
			}
		},	
	
	});
	//$("#list tbody tr").quickPager({pagerLocation:"both"});
	$("#list").tablesorter({widthFixed: true, widgets: ['zebra'],headers: {0: {sorter: false }}}).tablesorterPager({container: $("#pager")});	
});	

</script>
<div id="fade">
</div>
<div id="loading">
	<img  src="/images/ajax-loader.gif">
	<br>
	<span>Loading ...</span>
</div>
<!-- h2 stays for breadcrumbs -->
<div id="dialogEdit">
	<div class="itemDialog" >
		<div class="itemDialogIzq">
			<label>Clave:</label>
		</div>
		<div class="itemDialogDer">
			<span class="editKey" >Key</span>
		</div>
	</div>	
	<div class="itemDialog">
		<div class="itemDialogIzq">
			<label>Idioma:</label>
		</div>
		<div class="itemDialogDer">
			<span class="editLang">Lang</span>
		</div>
	</div>
	<div class="itemDialog">
		<div class="itemDialogIzq">
			<label>Texto</label>
		</div>
		<div class="itemDialogDer">
			<textarea  id="editText" ></textarea>
		</div>
	</div>
	<input type="hidden" id="currentKey" />
</div>
<h2>
	<a href="#">Traducciones</a> &raquo; <a href="#" class="active">Editar traducciones</a>
</h2>
<!-- <div id="buttonAdd" style="float:left; margin-bottom:10px; margin-left:21px; margin-top:10px;"><a href="#buttonSave"><img style="vertical-align : middle;" src="/images/icons/disk.png" />&nbsp;Guardar Textos</a></div>                 -->
<div id="main" style="overflow : scroll; " >
	
    	<table cellpadding="0" cellspacing="0" id="list" class="tablesorter tableTranslations" style="min-width : 1500px;">
			<thead>
				<tr >
					<th ></th>
					<th >Clave</th>
					<?foreach ( $this->langs as $l ) :?>
					<th ><?=$l['name']?></th>
					<?endforeach;?>
				</tr>	
			</thead>
			<tbody  >
				<? $i = 0;?>
				<?if ( count($this->texts) == 0 ):?>
      			<tr></tr>
      			<?endif;?>	
      			<?foreach( $this->texts as $u ):?>
      				<tr id="tr-<?=$i?>" >
						<td style="width : 20px;padding-left : 5px; padding-right : 5px"><img style="vertical-align : middle;" src="/images/icons/page_white.png" /></td>
						<td class="key" style="width : 150px;"><?=$u['texto'] ?></td>
                        <?foreach ( $this->langs as $l ):?>
                        <td class="<?=$l['prefix2']?>  editText" id="<?=$l['prefix2'] ?>-<?=$u['texto']?>"  rel="<?=$l['prefix2'] ?>-<?=$u['texto']?>" style="width : 250px"><?=$u[$l['prefix2']] ?></td>	
                        <?endforeach;?>
                    </tr>       
                 <?$i++?>   
                <?endforeach?>                  
			</tbody>	                        
       </table>
       <div id="pager" class="pager">
		<form>
			<a href="#" class="first"><img border=0 src="/img/iomanager/icons/go-first.png" /></a>
			<a href="#" class="prev"><img border=0  src="/img/iomanager/icons/go-previous.png" /></a>
			<span class="pagedisplay"></span>
			<a href="#" class="next"><img border=0 src="/img/iomanager/icons/go-next.png" /></a>
			<a href="#" class="last"><img border=0  src="/img/iomanager/icons/go-last.png" /></a>
			<select class="pagesize">
				<option selected="selected" value="10">10</option>
				<option  value="20">20</option>
				<option value="50">50</option>
				<option  value="100">100</option>
			</select>
		</form>
	</div>
</div>
<div class="clear"></div>
